<template>
  <div class="lb-app-poster-edit">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="posterForm"
        :rules="posterFormRules"
        ref="posterForm"
        label-width="140px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="posterForm.title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="posterForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips
            >图片建议尺寸: 220 * 290
            此图片用于海报列表页展示图片，尺寸更小的图片打开速度更快</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="海报" prop="img">
          <lb-cover
            :fileList="posterForm.img"
            @selectedFiles="getPoster"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 641 * 855</lb-tool-tips>
        </el-form-item>
        <el-form-item label="分类" prop="type_id">
          <el-select v-model="posterForm.type_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="posterForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('posterForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      posterForm: {
        title: '',
        cover: [],
        img: [],
        type_id: '',
        top: 0,
        id: ''
      },
      posterFormRules: {
        title: { required: true, type: 'string', message: '请输入标题', trigger: 'blur' },
        cover: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        img: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        type_id: { required: true, type: 'number', message: '请选择分类', trigger: 'change' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
      },
      options: []
    }
  },
  created () {
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.EditPoster' : 'menu.AddPoster')
    if (id) {
      this.posterForm.id = id
      this.getFormInfo(id)
    }
    this.getPosterOptions()
  },
  methods: {
    getFormInfo (id) {
      this.$api.getPosterInfo({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.posterForm) {
            this.posterForm[key] = res.data[key]
          }
          this.posterForm.cover = [{ url: res.data.cover }]
          this.posterForm.img = [{ url: res.data.img }]
        }
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { posterForm } = this
          let subForm = JSON.parse(JSON.stringify(posterForm))
          subForm.cover = posterForm.cover[0] ? posterForm.cover[0].url : ''
          subForm.img = posterForm.img[0] ? posterForm.img[0].url : ''
          if (subForm.id) {
            this.$api.editPosterInfo(subForm).then(res => {
              if (res.code === 200) {
                this.tipsSuccess()
                this.goBack()
              }
            })
          } else {
            this.$api.addPosterInfo(subForm).then(res => {
              if (res.code === 200) {
                this.tipsSuccess()
                this.goBack()
              }
            })
          }
        }
      })
    },
    getPosterOptions () {
      this.$api.getPosterSelectedOptions().then(res => {
        if (res.code === 200) {
          this.options = res.data.data
        }
      })
    },
    tipsSuccess () {
      this.$message.success(this.$t('tips.successSub'))
    },
    goBack () {
      this.$router.back(-1)
    },
    getCover (cover) {
      this.posterForm.cover = cover
    },
    getPoster (img) {
      this.posterForm.img = img
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-poster-edit {
  .el-input,
  .el-input-number,
  .el-select {
    width: 300px;
  }
}
</style>
